import React, { useEffect, useState } from 'react'
import { Clear } from '@react-vant/icons';
import { useNavigate} from "react-router-dom";
import { Input, Space } from 'antd';
import { serlist } from "../../../api/index"
import {useDispatch,useSelector} from "react-redux"
const { Search } = Input;
interface Props {

}
const Index = (props: Props) => {
    useEffect(() => {
        getser()
    }, [])
    const getser = () => {
        serlist().then((res: any) => {
            dispatch({
                type:"SER_LIST",
                payload:res.data.data
            })
        })
    }
    const list = useSelector((state:any) => state.reducer.serdata)
    const navigate = useNavigate()
    const dispatch=useDispatch()
    const onSearch = (value: string) =>{
        
        dispatch({
            type:"SERLIST",
            payload:value
        })
    }
    return (
        <div className='serbox'>
            <div className="ser">
                <div className="sertop">
                    <h3>Search Articles</h3>
                    <p className='sericon'><Clear onClick={() => navigate(-1)} /></p>
                    <p ><Search className='serch' placeholder="input search text" onSearch={onSearch} style={{ width: 950 }} /></p>
                </div>
                <div className="sercont">
                    <ul>
                        {
                            list && list.map((item: any, index: number) => {
                                return <li key={index}>
                                    {item.title}
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Index
